<template>
  <div class="container" >
    <div class="modify-meterial">
        <div class="cell-list" v-for="(item, index) in sureList" :key="index">
            <div class="card-header">
                <div class="card-title">
                    <span>{{index - 0 + 1}}.{{item.F_SubTitle || item.F_Title}}</span>
                    <div class="error"></div>
                </div>
                <div class="right-content">
                    <div class="num" v-show="item.Claim.length">{{item.Claim.length}}</div>
                    <div class="icon" @click="addPic(index)">
                        <img class="upload-icon" :src="iconUpload1Url" alt="">
                    </div>
                </div>
            </div>
            <div class="image-content">
                <p class="red" v-if="!item.F_CheckStatus">{{item.F_CheckResult}}</p>
                <div class="image-cell" v-for="(item2, index2) in item.Claim" :key="index2"><img :src="item2.fileUrl" alt=""><div class="upload-remove" @click="clearPic(index)" v-if='!item.F_CheckStatus'></div></div>
                <div class="image-cell" v-show="item.Claim.length" @click="addPic(index)">
                    <div class="add-image">
                        <img :src="addUrl" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="cell-list btn">
            <img class="add-icon"  :src="addUrl" alt="">
            <div class="text">添加其他材料</div>
        </div>
        <buttomBtn title="提交" @handleClick='handleClick'></buttomBtn>
    </div>
  </div>
</template>

<script>
import buttomBtn from '@/components/Bbutton'
import iconUpload1Url from 'static/image/upload.png'
import iconUpload2Url from 'static/image/upload2.png'
import infoUrl from 'static/image/info.png'
import addUrl from 'static/image/add.png'
import { getCaseClaims, uploadClaims } from 'api/api'
import config from 'api/config'
import { mapState } from 'vuex'

const baseUrl =
    process.env.NODE_ENV === 'development'
        ? config.Host.development
        : process.env.NODE_ENV === 'production'
            ? config.Host.production
            : config.Host.test
export default {
    data () {
        return {
            iconUpload1Url,
            iconUpload2Url,
            infoUrl,
            addUrl,
            sureList: [],
            mainId: '',
            caseId: ''
        }
    },

    components: {
        buttomBtn
    },

    methods: {
        handleClick () {
            let tempArr = []
            let copyArr = JSON.parse(JSON.stringify(this.sureList))
            let _this = this
            copyArr.forEach((item, index) => {
                let obj = {
                    'caseId': _this.caseId,
                    'tilte': item.F_SubTitle || item.F_Title,
                    'claimId': item.F_Id,
                    'files': item.Claim
                }
                tempArr.push(obj)
            })
            uploadClaims(tempArr)
                .then((res) => {
                    wx.showModal({
                        title: '提示',
                        content: '提交成功',
                        showCancel: false,
                        success: function (res) {
                            const url = '../claim/index'
                            wx.switchTab({ url })
                        }
                    })
                })
        },
        clearPic (index) {
            this.sureList[index].Claim.splice(0, this.sureList[index].Claim.length)
            this.$forceUpdate()
        },
        _getCaseClaims () {
            if (this.$store.state.claim.intoTypeList !== 'new') {
                getCaseClaims(this.mainId, this.caseId)
                    .then((res) => {
                        console.log(res)
                        this.sureList = res.data
                    })
            } else {
                console.log(this.$store.state.claim.claimList)
                this.sureList = Array.from(this.$store.state.claim.claimList)
            }
        },
        addPic (index) {
            console.log(index)
            let _this = this
            wx.chooseImage({
                count: 9, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths
                    // var tempFile = res.tempFiles[0]
                    console.log(res)
                    console.log(tempFilePaths)
                    wx.showToast({
                        title: '正在上传...',
                        icon: 'loading',
                        mask: true,
                        duration: 10000
                    })
                    tempFilePaths.forEach(filePath => {
                        wx.uploadFile({
                            url: `${baseUrl}/case/upload`,
                            filePath,
                            name: 'file',
                            header: {
                                'Authorization': wx.getStorageSync('token')
                            },
                            success: function (res) {
                                console.log(res)
                                let obj = {
                                    'fileName': JSON.parse(res.data).data.filePath,
                                    'fileUrl': JSON.parse(res.data).data.fileUrl
                                }
                                console.log(_this.sureList[index])
                                _this.sureList[index].Claim.push(obj)
                                _this.$forceUpdate()
                            },
                            fail: function (res) {
                                wx.hideToast()
                                wx.showModal({
                                    title: '错误提示',
                                    content: '上传图片失败',
                                    showCancel: false,
                                    success: function (res) { }
                                })
                            }
                        })
                    })
                    wx.hideToast()
                }
            })
        }
    },
    computed: {
        ...mapState({
            claimInfo: state => state.claim.claim,
            claimList: state => state.claim.claimList
        })
    },
    mounted () {
        this.sureList = []
        this.caseId = this.$store.state.claim.claim.CaseId
        this.mainId = this.$store.state.claim.claim.F_MainId
        this._getCaseClaims()
    },
    onShow () {
    }
}
</script>

<style lang='stylus' scoped>
.modify-meterial
    width 750rpx
    display flex
    flex-direction column
    padding 25rpx 0 0
    .cell-list
        background #fff
        margin 0 22rpx 15rpx
        display flex
        flex-direction column
        &.btn
            border 1rpx dashed #dadada
            color #c9c9c9
            display flex
            flex-direction row
            justify-content center
            text-align center
            height 100rpx
            line-height 100rpx
            .add-icon
                width 28rpx
                height 28rpx
                margin-right 10rpx
                margin-top 35rpx
            .text
                display inline-block
                font-size 28rpx
        .card-header
            min-height 100rpx
            line-height 100rpx
            padding 0 20rpx 0 30rpx
            border-bottom 1rpx solid #f2f2f2
            display flex
            justify-content space-between
        .right-content
            display flex
            .num
                position relative
                color #2070fd
                margin-right 31rpx
                height 42rpx
                width 42rpx
                border-radius 50%
                border 1rpx solid #2070fd
                margin-top:20rpx
                line-height:44rpx
                text-align:center
            .icon
                .upload-icon
                    width 37rpx
                    height 36rpx
        .image-content
            padding 20rpx 20rpx 20rpx 30rpx
            display flex
            flex-wrap wrap
            justify-content flex-start
            .red
                width:100%
                color:red
                padding-bottom:10px
            .image-cell
                width 32%
                height 210rpx
                margin 0 8rpx 10rpx 0
                position relative
                img
                    width 100%
                    height 100%
                .add-image
                    background-color #efefef
                    display flex
                    justify-content: center
                    align-items:center
                    height:100%
                    width:100%
                    img
                        width 60rpx
                        height 60rpx
            .upload-remove
                width: 30rpx
                height: 30rpx
                position: absolute
                right: 12rpx
                top: 12rpx
                text-align: right
                vertical-align: top
                z-index: 2
                background-size: 30rpx auto
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill-opacity='.4' fill='%23404040' cx='8' cy='8' r='8'/%3E%3Cpath d='M11.898 4.101a.345.345 0 0 0-.488 0L8 7.511l-3.411-3.41a.345.345 0 0 0-.488.488l3.411 3.41-3.41 3.412a.345.345 0 0 0 .488.488L8 8.487l3.411 3.411a.345.345 0 0 0 .488-.488L8.488 8l3.41-3.412a.344.344 0 0 0 0-.487z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E")


</style>
